<template>
    <n-form
        ref="formRef"
        label-placement="left"
        label-width="auto"
        :model="pipeline"
        :rules="rules">
        <!--                :size="medium"-->
        <!--            >-->
        <n-form-item label="名称" path="name">
            <n-input v-model:value="pipeline.name" placeholder="输入名称"/>
        </n-form-item>

        <n-form-item label="工作目录" path="workspace">
            <n-input v-model:value="pipeline.workspace" placeholder="工作目录" readonly disabled/>
        </n-form-item>

        <n-divider title-placement="left">源代码仓库配置</n-divider>
        <n-form-item label="URL" path="git_clone_url">
            <n-input v-model:value="pipeline.git_clone_url" placeholder="源代码库URL"/>
        </n-form-item>
        <n-form-item label="用户" path="git_username">
            <n-input v-model:value="pipeline.git_username" placeholder="登录用户"/>
        </n-form-item>
        <n-form-item label="密码" path="git_password">
            <n-input v-model:value="pipeline.git_password" placeholder="登录密码"/>
        </n-form-item>

        <n-divider title-placement="left">源码编译</n-divider>
        <n-form-item label="编译服务器" path="builder_id">
            <n-select label-field="name" value-field="id" v-model:value="pipeline.builder_id"
                      :options="state.builders"/>
        </n-form-item>
        <n-form-item label="编译环境" path="compiler_id">
            <n-select label-field="name" value-field="id" v-model:value="pipeline.compiler_id"
                      :options="state.compilers"/>
        </n-form-item>

        <n-divider title-placement="left">镜像生成</n-divider>
        <n-form-item label="镜像仓库" path="repository_id">
            <n-select label-field="name" value-field="id" v-model:value="pipeline.repository_id"
                      :options="state.repositories"/>
        </n-form-item>
        <n-form-item label="镜像命名空间" path="namespace">
            <n-input v-model:value="pipeline.namespace" placeholder="镜像命名空间"/>
        </n-form-item>
        <n-form-item label="镜像名称" path="image">
            <n-input v-model:value="pipeline.image" placeholder="镜像名称"/>
        </n-form-item>
        <n-form-item label="镜像版本" path="tag">
            <n-input v-model:value="pipeline.tag" placeholder="镜像版本" value="${timestamp}" readonly disabled/>
            <!--                        <n-select label-field="name" value-field="id" v-model:value="pipeline.tag"-->
            <!--                                  :options="state.deployers"/>-->
        </n-form-item>

        <n-divider title-placement="left">应用部署</n-divider>
        <n-form-item label="部署服务器" path="deployer_id">
            <n-select label-field="name" value-field="id" v-model:value="pipeline.deployer_id"
                      :options="state.deployers"/>
        </n-form-item>
    </n-form>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
const props = defineProps({
    pipeline:{},
    formRef : null
})
const state = reactive({
    compilers: [],
    builders: [],
    deployers: [],
    repositories: [],
    result: [],

    selectedCompiler: ref(null),
    selectedBuilder: ref(null),
    selectedDeployer: ref(null),
    selectedRepository: ref(null),
})

const rules = {
    name: {
        required: true,
        message: '姓名不能为空',
        trigger: ['input', 'blur']
    },
    git_clone_url: {
        required: true,
        message: '源代码库 URL 不能为空',
        trigger: ['input', 'blur']
    },
}

</script>

<style scoped lang="scss">

</style>
